/* 导航栏*/
*{padding: 0;margin: 0;list-style: none}
a{
    text-decoration: none
}
body{
    background-color: rgb(245,245,245);
}
.clear:after{
    content: '';
    display: block;
    clear: both;
}
.nav-top{
    min-width: 1226px;
    height: 40px;
    background-color: #333;
    color: #b0b0b0;


}
.nav{
    width: 1226px;
    line-height: 40px;
    /*background-color: red;*/
    margin: 0 auto;
    font-size: 12px;


}

.nav .left{
    width: 794px;
    height: 40px;
    /*background-color: green;*/
    float: left;
}
.nav .left>a{
    color: #b0b0b0;
}
.nav .left>span{
    margin-left:3.23px;
    margin-right: 3.23px;
}
.nav .left>a:hover{
    color: white;
}
.nav .middle a:hover{
    color: white;
}

.nav .right{
    width: 120px;
    height: 40px;
    /*background-color: green;*/
    float: right;
}
.nav .right{
    color: #fff;
}
.nav .right>a{
    color: #fff;
}
.right{
    text-align: center;
}
.right:hover{
    color:#ff6700;
}
.right:hover  a{
    color:#ff6700;
}


.nav .middle{
    width: 140px;
    height: 40px;
    /*background-color: green;*/
    float: right;
}
.nav .middle>a{
    color: #b0b0b0;
}
.nav .middle>span{
    margin-left:3.23px;
    margin-right: 3.23px;
}

.main-mav-top{
    min-width: 1226px;
    /*background-color: red;*/
    position: relative;
}
.main-nav{
    width: 1226px;
    height: 100px;
    /*background: blue;*/
    margin: 0 auto;
}

.main-nav .mi-logo{
    width: 56px;
    height: 56px;
    float: left;
    /*background-color: pink;*/
    float: left;
    margin-top: 22px    ;
}
.main-nav .mi-logo>img{
    width: 100%;
}
.main-nav .mi-product{
    width: 850px;
    height: 100px;
    /*background-color: purple;*/
    float: left;
}
.mi-product ul>li>a>div{
    min-width: 1226px;
    background-color: red;
    width: 1226px;
    height: 230px;
    margin: 0 auto;
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: 176.5px;
    border-top: 1px solid #c4c4c4;
    border-bottomq: 1px solid #c4c4c4;
    display: none;
}

.mi-product ul>li>a:hover div{
    display: block;
    z-index: 1;

}


.main-nav .mi-find{
    width: 296px;
    height: 100px;
    /*background-color: green;*/
    float: right;
}
.main-nav .mi-find>form{
    width: 296px;
    height: 50px;
}
.main-nav .mi-find>form>div{
    width: 48px;
    height: 50px;
    margin-top: 26px;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    border-right: 1px solid #c4c4c4;
    float: left;
    background-color: #fff;
}


.main-nav .mi-find>form>div>button{

    height: 50px;
    width: 38px;
    background-color: #fff;
    border:none ;
    margin-left: 4px;
    font-size: 22px;
    font-weight: bold;
}
.main-nav .mi-find>form>div:hover{
    background-color: #ff6700;

}
.main-nav .mi-find>form>div:hover button{
    background-color: #ff6700;
    color: white;
}

.main-nav .mi-find>form>input{
    margin-top:26px;
    padding-left: 10px;
    height: 50px;
    width: 234px;
    float: left;
    border: none;
    border: 1px solid #c4c4c4;
}
.main-nav .mi-find>form .submit{
    height: 50px;
    width: 52px;
    padding: 0;
}
.mi-product>ul .li1{
    width: 127px;
    height: 88px;
    /*background-color: pink;*/
    margin-top: 12px;
    padding-right: 15px;
}
.mi-product>ul>li>a{
    color: #000;

}

.mi-product>ul>li{
    float: left;
    font-size: 14px;
    text-align: center;
}
.mi-product>ul>li{
    margin-top:13px ;
}
.mi-product>ul>li>a:hover{
    color: #ff6700;
}

.mi-product>ul>li:nth-child(2){
    width: 81px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(3){
    width: 82px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(4){
    width: 32px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(5){
    width: 48px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(6){
    width: 32px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(7){
    width: 32px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(8){
    width: 48px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(9){
    width: 32px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}
.mi-product>ul>li:nth-child(10){
    width: 32px;
    height: 24px;
    padding: 26px 10px 38px 10px;
}

/* content*/

.main-content{
    min-width: 1226px;
    height: 460px;

}

.main-content .content img{
    width: 100%;
    float: left;
}





.content {
    width: 1226px;
    height: 460px;
    /*border: 1px solid red;*/
    overflow: hidden;
    position: relative;
    margin: 0 auto;

}
.content>ul{
    animation: switch 1s ease 1s infinite alternate;
    display: flex;
    position: absolute;
}
.content img{
    width: 100%;

}

.content>ul:hover{
    animation-play-state: paused;
}
@keyframes switch {
    0%,25%{
        left: 0;
    }
    26%,50%{
        left: -2452px;
    }
    51%,75%{
        left: -3678px;
    }
    76%,100% {
        left: -4904px;
    }

}















.main-content .content .list{


    float: left;
    width: 234px;
    height: 460px;
    background-color: #c4c4c4;
    box-sizing: border-box;
    background-color: rgba(161,161,161,0.5);
    position: absolute;
    left:0px;
    top: 0;

}
.main-content .content .list ul{
    padding-top: 20px;
    ;

}
.main-content .content .list ul>li{
    line-height: 42px;
    padding-left: 42px;
    padding-right: 20px;
    color: #fff;
    font-size: 14px;
}

.main-content .content .list ul>li:hover{

    background-color: #ff6700;
}
.main-content .content .list ul>li:hover .list1{
    display: block;
}

.list .l>span:nth-child(2){
    float: right;
}
.list1{
    width: 800px;
    height: 460px;
    background-color: red;
    position: absolute;
    left: 234px;
    top: 0;
    display: none;
    background-color: pink;
    color: black;

}
/*product*/

.next-content{
    width: 1226px;
    height: 170px;
    margin: 0 auto;
    /*background-color: red;*/
    padding-top: 17px;
}
.next-content .return{
    width: 234px;
    height: 170px;
    background-color: rgb(95,87,80);
    float: left;
}
.next-content .product{
    width: 992px;
    height: 170px;
    /*background-color: pink;*/
    float: left;
}
.next-content .product .p1{
    width: 316px;
    height: 170px;
    background-color: yellow;
    float: left;
    margin-left: 14px;
}
.next-content .return>ul>li>div>p:hover{
    color: #fff;
}
.next-content .return>ul>li>div:hover{
    color: #fff;
}


.next-content .product .p2{
    width: 316px;
    height: 170px;
    background-color: green;
    float: left;
    margin-left: 15px;
}
.next-content .product .p3{
    width: 316px;
    height: 170px;
    background-color: black;
    float: left;
    margin-left: 15px;
}
.next-content .product>div>img{
    width: 100%;
}
.return>ul>li{
    width: 78px;
    height: 85px;
    /*background-color: rgb(245,245,245);*/
    float: left;

}
.return>ul>li>div{
    height: 46px;
    width: 70px;
    padding-top:18px ;




}
.return>ul>li>div>img{
    width: 24px;
    height: 24px;
    margin: 3px 18px;


}
.return>ul>li>div>p{
    font-size: 12px;
    color: rgb(207,204,206);
    margin: -4px 11px;
}

/*show*/
.show{
    min-width: 1226px;
    background-color: rgb(245,245,245);
    /*padding-top: 25px;*/

}
.show .show-phone{
    width: 1226px;
    height: 120px;
    margin: 0 auto;
    /*background-color: red;*/
    /*margin-top: 25px;*/
    /*margin-bottom: 25px;*/
}
.show .show-phone>img{
    width: 100%;
    margin-top: 25px;
    padding-bottom: 25px;
    box-sizing: border-box;
}
/*手机*/
.phone{
    height: 58px;
    line-height: 58px;
    width: 1226px;
    /*background-color: blue;*/
    background-color: rgb(245,245,245);
    margin:25px auto;
    box-sizing: border-box;
}
.iphone{
    float: left;
    font-size: 22px;
    /*margin-top:25px ;*/
}
.mark{
    float: right;
    margin-top:25px ;
}
.show-more{
    float: right;
    margin-top:25px ;
}
.phones{
    height: 614px;
    width: 1226px;
    background-color: rgb(245,245,245);
    margin: 0 auto;
 }
.box1{
    width: 234px;
    height: 614px;
    /*background-color: red;*/
    border: 1px none #eaffea;
    /*box-shadow: 3px 3px 3px 3px #c4c4c4;*/
    float: left;
}
.box1:hover{
    box-shadow: 3px 3px 3px 3px #c4c4c4;
}
.box2{
    height: 614px;
    width: 992px;
    float: left;
}
.box2 li{
    height: 300px;
    width: 234px;
    margin-left: 14px;
    float: left;
    background-color:#fff;
    margin-bottom: 14px;
    /*box-shadow: 3px 3px 3px 3px #c4c4c4;*/
}
.box2 li:hover{
    box-shadow: 3px 3px 3px 3px #c4c4c4;
}
.box2 .sb-li{
    height: 300px;
    width: 234px;
    margin-left: 14px;
    float: left;
    background-color:#fff;
    margin-bottom: 14px;
}
.box2 .sb-li .sb1{
    height: 143px;
    width: 234px;
    float: left;
}
.box2 .sb-li .sb2{
    lheight: 143px;
    width: 234px;
    /*background-color: red;*/
    float: left;
}
.box2 .sb-li .sb2 p{
    text-align: center;
    font-size: 20px;
    margin-top: 59px;
}
.box2 .sb-li div  img{
    height: 80px;
    width: 80px;
    /*margin-left:134px ;*/
    margin-left: 154px;
    margin-top: 31.5px;


}
.box2 .sb-li .insert{
    width: 234px;
    height: 14px;
    background-color: rgb(245,245,245);
    float: left;
}
.box2 .sb-li>div:hover{
    box-shadow: 3px 3px 3px 3px #c4c4c4;
}









/*video*/

.video{
    min-width: 1226px;
    /*background-color: red;*/
    background-color: rgb(245,245,245);
    /*margin-bottom: 14px;*/
}
.video-4{
    height: 285px;
    width: 1226px;
    /*background-color: blue;*/
    /*border: 1px solid red;*/
    margin:0 auto ;
    /*margin-bottom: 14px;*/
    position: relative;
}
.video-4 div{
    height: 285px;
    width: 1240px;
    position: absolute;
    top: 0;
    left: 0;
}
.video-4>div>ul>li{
    width: 296px;
    height: 285px;
    /*border: 1px solid green;*/
    margin-right: 14px;
    background-color: white;
    /*margin-bottom: 14px;*/
    box-sizing: border-box;
    float: left;
}
.video-4>div>ul>li>.vp1{
    height: 180px;
    width: 296px;
}
.video-4>div>ul>li>.vp1>img{
    width: 100%;
}
.video-4>div>ul>li>.vp2{
    margin-top: 30px;
    text-align: center;
}
.video-b{
    height: 28px;
    min-width:1226px ;
    background-color: rgb(245,245,245);
}









/* 底部bottom*/
.nav-bottom{
    min-width: 1226px;
    height: 598px;
    /*background-color: red;*/

}
.nav-bottom .bottom{
    width: 1226px;
    height: 80px;
    /*line-height: 80px;*/
    /*background-color: pink;*/
    margin: 0 auto;
}
.nav-bottom .bottom ul .b1{
    width: 242px;
    height: 25px;
    float: left;
    font-size: 16px;
    color: #616161;
    margin-top: 27.5px;
    text-align: center;
    border-right: 1px solid #c4c4c4;
}
.nav-bottom .bottom{
    border-bottom: 1px solid #616161;
}
.nav-bottom .bottom ul .b2{
    width: 242px;
    height: 25px;
    float: left;
    font-size: 16px;
    color: #616161;
    margin-top: 27.5px;
    text-align: center;
}
.nav-bottom .bottom ul>li:hover{
    color: #ff6700;
}


.bottom-nav{
    height: 252px;
    width: 1226px;
    /*background-color: red;*/
    margin: 0 auto;
}
.bottom-nav .bottom-content{
    padding-top: 40px;
    padding-bottom:40px ;
    height: 172px;
    /*border: 1px solid pink;*/
}
.bottom-nav .bottom-content>dl:first-child>dt{
    width: 160px;
    height: 172px;
    /*border: 1px solid red;*/
    float: left;
}
.bottom-nav .bottom-content>dl:last-child>dt{
    width: 251px;
    height: 110px;
    /*border: 1px solid red;*/
    float: left;
    border-left: 1px solid #c4c4c4;
}
.bottom-nav .bottom-content>dl>dt{
    font-size: 14px;
}
.bottom-nav .bottom-content>dl>dt>ul{
    margin-top: 26px;

    width: 160px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.bottom-nav .bottom-content>dl>dt>ul>li{
    margin-top: 10px;
    font-size: 12px;

}
.bottom-nav .bottom-content>dl>dt>ul>li:hover{
    color: #ff6700;
}

.bottom-nav .bottom-content>dl:last-child>dt>p:nth-child(1){
    font-size: 22px;
    color: #ff6700;
    text-align: center;
}
.bottom-nav .bottom-content>dl:last-child>dt>p:nth-child(2){
    font-size: 12px;
    text-align: center;

}
.bottom-nav .bottom-content>dl:last-child>dt>p:nth-child(3){
    line-height: 28px;
    width: 118px;
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    color: #ff6700;
    border: 1px solid #ff6700;
    margin-top: 5px;
    
}
.bottom-nav .bottom-content>dl:last-child>dt>p:nth-child(3):hover{
    background-color: #ff6700;
    color: #fff;
}
.bottom-nav .bottom-content>dl:last-child>dt>p:nth-child(4){
    font-size: 12px;
    text-align: center;
    margin-top:5px;
}
.bottom-nav .bottom-content>dl:last-child>dt>p:nth-child(4)>span:hover{
    color: #ff6700;
}

/*  3  */

.bottom-3{
    height: 266px;
    width: 1226px;
    margin: 0 auto;
    /*background-color: red;*/
    padding-bottom: 30px;
    padding-top: 30px;
    position: relative;
}
.xm-logo{
    height: 56px;
    width: 56px;
    float: left;
    /*position: relative;*/

}
.xm-logo>img{
    width: 100%;
}
.bottom-3>div:nth-child(2){
    width: 1159px;
    height: 110px;
    /*background-color: red;*/
    padding-left: 11px;
    /*border-top: 1px solid red;*/
    float: left;
}
.bottom-3>div:nth-child(2)>p>a{
    font-size: 12px;
    color: #757575;
    /*text-align: center;*/
}
.bottom-3>div:nth-child(2)>p>a:hover{
    color: #ff6700;
}
.bottom-3>div:nth-child(2)>p>span{
    color: #757575;
}
.bottom-3>div:nth-child(2)>p>a>img{
    height: 100%;
}
.bottom-3>div:nth-child(2)>.p5{
    height: 28px;
}

.bottom-3>div:nth-child(3){
    line-height: 79px;
    width: 1226px;
    /*background-color: red;*/
    position: absolute;
    top:247px;
    left: 0;
}
.bottom-3>div:nth-child(3)>p{
    text-align: center;
    font-size: 18px;
    font-weight: lighter;
    color: #333 ;
    font-style: italic;
}



















